<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击</button>
    <script>

        function fn1() {
            console.log('很多逻辑a')
        }

        function fn2() {
            console.log('很多逻辑b')

        }

        // // document.querySelector('.btn').addEventListener('click',fn1)
        // // document.querySelector('.btn').addEventListener('click',fn2)

        // let handle = {
        //     // "myevent":[fn1,fn2],
        //     // "myevent2":[fn1,fn2...],
        // }

        // addEvent('myevent', fn1)
        // addEvent('myevent', fn2)
        // removeEvent('myevent', fn2)

        // trigger('myevent')
        // function addEvent(eventName, fn) {
        //     if (typeof handle[eventName] === 'undefined') {
        //         handle[eventName] = []
        //     }
        //     handle[eventName].push(fn)
        // }

        // function trigger(eventName) {
        //     if (!(eventName in handle)) {
        //         return;
        //     } else {
        //         handle[eventName].forEach(v => {
        //             v();
        //         });
        //     }

        // }

        // function removeEvent(eventName, fn) {

        //     if (!(eventName in handle)) {
        //         return;
        //     } else {
        //         for (let i = 0; i < handle[eventName].length; i++) {
        //             if (handle[eventName][i] == fn) {
        //                 handle[eventName].splice(i, 1)
        //                 break;
        //             }
        //         }

        //     }
        // }

        class MyEvent {
            constructor() {
                this.handle = {
                    // "myevent":[fn1,fn2],
                    // "myevent2":[fn1,fn2...],
                }
            }


            addEvent(eventName, fn) {
                if (typeof this.handle[eventName] === 'undefined') {
                    this.handle[eventName] = []
                }
                this.handle[eventName].push(fn)
            }

            trigger(eventName) {
                if (!(eventName in this.handle)) {
                    return;
                } else {
                    this.handle[eventName].forEach(v => {
                        v();
                    });
                }

            }

            removeEvent(eventName, fn) {

                if (!(eventName in this.handle)) {
                    return;
                } else {
                    for (let i = 0; i < this.handle[eventName].length; i++) {
                        if (this.handle[eventName][i] == fn) {
                            this.handle[eventName].splice(i, 1)
                            break;
                        }
                    }

                }
            }
        }

        let  myevent = new MyEvent();
        myevent.addEvent('myevent', fn1)
        myevent.addEvent('myevent', fn2)
        myevent.removeEvent('myevent', fn2)
        myevent.trigger('myevent')




    </script>
</body>

</html>